<template>
  <div class="icon">
    <div class="title">
      <h3>使用方法</h3>
      <div>直接通过设置类名 为 icon-XXX 来使用即可。</div>
      <div>如：&lt;i class="icon-meishi"&gt;&lt;i&gt;</div>
    </div>
    <h3>图标</h3>
    <div class="content">
        <div class="box" v-for="item in listComputed" :key="item.icon_id">
          <div>{{ item.name }}</div>
          <div :class="'icon-'+item.font_class">{{item.font_class}}</div>
        </div>
    </div>
  </div>
</template>

<script  setup>
import {
  onMounted,
  getCurrentInstance,
  reactive,
  toRefs,
  ref,
  computed,
} from "vue";
const { proxy } = getCurrentInstance();
const list = ref([]);
const listComputed = computed(() => {
  return list.value;
});

onMounted(() => {
  proxy.$axios
    .get("http://localhost:3000/static/iconfont.json")
    .then((res) => {
      list.value = res.data.glyphs;
    })
    .catch(function (error) {
      console.log(error);
    });
});
</script>

<style scoped>
.content {
  display: flex;
  width: 100%;
  background-color: #F0F0F0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.box {
  font-family: 'iconfont';
  background-color: white;
  width: 200px;
  height: 100px;
  display: inline-block;
  text-align: center;
  display: flex;
    flex-direction: column;
    justify-content: space-around;
  margin: 10px 10px;
}
.icon {
  width: 99%;
  margin: 20px auto;
  box-sizing: border-box;
  background-color: white;
  padding: 20px 0 0 15px;
  overflow: auto;
}
.title > div {
  margin: 10px 0;
  font-size: 16px;
}
</style>